Skip to content

Comments

feat: add max-width constraint for large screen layout#10688

Draft
roomote[bot] wants to merge 1 commit intomainfrom
feature/large-screen-max-width
Draft

feat: add max-width constraint for large screen layout#10688
roomote[bot] wants to merge 1 commit intomainfrom
feature/large-screen-max-width

Conversation

@roomote
Copy link
Contributor

@roomote roomote bot commented Jan 13, 2026 •
edited by ellipsis-dev bot
Loading

Related GitHub Issue

Closes: #10687

Description

This PR attempts to address Issue #10687 by adding a max-width constraint for large screen layouts in editor/tab mode.

Implementation Details:

  • Added a wrapper div in App.tsx that applies max-width: 896px with centered content (mx-auto)
  • The constraint only applies when renderContext === "editor" (tab mode), leaving the sidebar layout unchanged
  • The 896px max-width value was calculated based on Cursor's implementation as noted in the issue

Key design choices:

  • Applied the constraint at the App component level to affect all views (ChatView, SettingsView, HistoryView, etc.)
  • Used Tailwind classes (max-w-[896px] mx-auto) for consistency with the existing codebase
  • Preserved full-width behavior in sidebar mode where the constraint isn't needed

Test Procedure

  1. Open Roo Code in a tab (editor mode) on a large screen (>896px width)
  2. Verify the content is constrained to 896px max-width and centered
  3. Open Roo Code in the sidebar
  4. Verify the content still uses full width (no constraint applied)
  5. Test across different views (Chat, Settings, History, Marketplace, Cloud)

Automated Testing:

  • Type checking passes (tsc --noEmit)
  • Linting passes (eslint)
  • All existing App.spec.tsx tests pass (7/7)

Pre-Submission Checklist

  • Issue Linked: This PR is linked to an approved GitHub Issue (see "Related GitHub Issue" above).
  • Scope: My changes are focused on the linked issue (one major feature/fix per PR).
  • Self-Review: I have performed a thorough self-review of my code.
  • Testing: New and/or updated tests have been added to cover my changes (if applicable).
  • Documentation Impact: I have considered if my changes require documentation updates (see "Documentation Updates" section below).
  • Contribution Guidelines: I have read and agree to the Contributor Guidelines.

Screenshots / Videos

No screenshots available in this automated environment, but the visual change should show:

  • Before: Content stretches across the full width of the editor tab
  • After: Content is constrained to 896px and centered, similar to Cursor's layout

Documentation Updates

  • No documentation updates are required.

Additional Notes

This is an automated PR attempt. Feedback and guidance are welcome!

Important

Adds a max-width constraint of 896px for large screen layouts in editor/tab mode in App.tsx, using Tailwind CSS for consistency.

  • Behavior:
    • Adds a wrapper div in App.tsx with max-width: 896px and centered content (mx-auto) for large screens in editor/tab mode.
    • Applies constraint only when renderContext === "editor", leaving sidebar layout unchanged.
  • Design:
    • Uses Tailwind classes (max-w-[896px] mx-auto) for consistency.
    • Affects all views (ChatView, SettingsView, HistoryView, etc.) at the App component level.
  • Testing:
    • Manual testing procedure outlined for different views and contexts.
    • Automated tests pass: type checking (tsc --noEmit), linting (eslint), and App.spec.tsx tests (7/7).

This description was created by Ellipsis for ba7aa82. You can customize this summary. It will automatically update as commits are pushed.

@roomote
feat: add max-width constraint for large screen layout
ba7aa82 
Adds a max-width of 896px and centers content when Roo Code is displayed
in editor/tab mode on large screens. This improves readability and
visual consistency, similar to how Cursor handles large screen layouts.

The constraint only applies in "editor" render context (when opened as a
tab), not in the sidebar where width is naturally constrained.

Closes #10687
@roomote roomote bot mentioned this pull request Jan 13, 2026
Open
2 tasks
@roomote
Copy link
Contributor Author

roomote bot commented Jan 13, 2026 •
edited
Loading

Rooviewer Clock   See task on Roo Cloud

Reviewed the PR changes. The implementation is clean and correct:

  • Type-safe check for renderContext === "editor"
  • Preserves full-width behavior in sidebar mode
  • Uses proper Tailwind classes consistent with the codebase
  • Non-breaking change from Fragment to div wrapper

No issues found.

Mention @roomote in a comment to request specific changes to this pull request or fix all unresolved issues.

Sign up for free to join this conversation on GitHub. Already have an account? Sign in to comment

Reviewers

@mrubens mrubens Awaiting requested review from mrubens mrubens will be requested when the pull request is marked ready for review mrubens is a code owner

@cte cte Awaiting requested review from cte cte will be requested when the pull request is marked ready for review cte is a code owner

@jr jr Awaiting requested review from jr jr will be requested when the pull request is marked ready for review jr is a code owner

@hannesrudolph hannesrudolph Awaiting requested review from hannesrudolph hannesrudolph will be requested when the pull request is marked ready for review hannesrudolph is a code owner

@daniel-lxs daniel-lxs Awaiting requested review from daniel-lxs daniel-lxs will be requested when the pull request is marked ready for review daniel-lxs is a code owner

At least 1 approving review is required to merge this pull request.

Assignees

No one assigned

Labels

None yet

Projects

No open projects
Roo Code Roadmap
Status: Triage

Milestone

No milestone

Development

Successfully merging this pull request may close these issues.

[ENHANCEMENT] Large Screen Layout

1 participant

@roomote